<!--
* Copyright (c) 2014 Cisco Systems, Inc. and others.  All rights reserved.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v1.0 which accompanies this distribution,
* and is available at http://www.eclipse.org/legal/epl-v10.html
-->
<div id="topoDiv" class="row-fluid">
    <div class="row-fluid" style="height:51px; background-color:#05171e;">
        <ul class="nav nav-pills ng-scope" style="padding-top: 12px;">
            <li class="active " data-toggle="pill"><a href="" ng-click="physicalToggle('init')">{{ 'DATALINK' | translate
                }}</a></li>
            <li><a href="" data-toggle="pill" ng-click="tunnelToggle()" ng-show="false">{{ 'Tunnel' | translate }}</a></li>
            <li><a href="" data-toggle="pill" ng-click='pwToggle()' ng-show="false">{{ 'PW' | translate }}</a></li>
            <li><a href="" data-toggle="pill" ng-click='service.toggle()'>{{ 'PW' | translate }}</a></li>
            <li ng-show="manager.managertabshow"><a href="" data-toggle="pill" ng-click='manager.toggle()'>{{ 'Inband Management' | translate }}</a></li>
            <li><a href="" data-toggle="pill" ng-click='flow.toggle()'>{{ 'Flow' | translate }}</a></li>
            <li id="baidumap"><a href="" data-toggle="pill" >{{ 'BMAP' | translate }}</a></li> 
        </ul>
    </div>

    <div id="terminalDiv">

        <div id="terminal0" style="position:absolute; visibility: hidden; z-index:1" class="termHidden">
            <table cellpadding="0" cellspacing="0">
                <tr><td class="termBody"><div name="termDiv" id="termDiv0" style="position:positive;"></div></td></tr>
            </table>
        </div>

    </div>

    <!--PHYSICAL TOPOLOGY VIEW-->
    <div id="1111" ng-hide="physicalhide">
        <nav class="navbar navbar-default" style="margin: 5px 5px;background-color: #ced3d6 !important;">
            <div class="collapse navbar-collapse">
                <div class="row">
                    <form class="navbar-form navbar-left ng-pristine ng-valid" style="margin-top: 16px;">
                        <span class="ng-binding">更新时间:</span>
                        <span class="ng-binding">{{physical.refreshTime}}</span>
                    </form>
                    <form class="navbar-form navbar-right ng-pristine ng-valid">
                        <button class="btn btn-default ng-binding" data-toggle="modal" data-target="#createExtNodeModal">创建外部节点</button>
                        <button class="btn btn-default ng-binding" data-toggle="modal" data-target="#createExtLinkModal">创建外部链路</button>
                        <button class="btn btn-default ng-binding" data-toggle="modal" ng-hide="datalinkshowName" ng-click="configTopoShowName()">显示设备名称</button>
                        <button class="btn btn-default ng-binding ng-hide" data-toggle="modal" ng-hide="datalinkshowUserlabel" ng-click="configTopoShowUserlabel()">显示设备用户标识</button>
                        <button class="btn btn-default ng-binding" data-toggle="modal" ng-click="configNodeIcon()" style="margin-right: 9px;">更换设备图标</button>
                        <select ng-model="physicalselect" class="form-control selectDiv2" style="height:26px;width:110px;margin-right: -8px;padding-top: 1px;margin-top: -2px;">
                            <option value="name" class="ng-binding">节点名称</option>
                            <option value="userlabel" class="ng-binding">用户标识</option>
                        </select>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input class="input-medium search-query ng-pristine ng-untouched ng-valid" type="text" placeholder="" ng-model="physicalvalue" style="width: 110px;height: 26px;margin-right:-2px">&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="image" value="过滤" ng-click="physicalFilter()" src="assets/images/filterbutton.png" style="margin-bottom: -5px;margin-right: -4px;">&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="image" value="删除" ng-click="physicalDelDownNodes()" src="assets/images/delete.png" style="margin-bottom: -5px;margin-right: 18px;">
                    </form>
                </div>
            </div>
        </nav>
        <div class="row-fluid topologyview" id="topologyview">
            <topology-simple id="topoSimple" class="col-md-12" style="margin-top:-10px" topology-data="topologyData"></topology-simple>
        </div>
        <div class="contextMenu" id="topoDataLinkMenu" ng-show="false">
            <ul>
                <li id="Inventory">资源</li>
                <!-- <li>告警</li>
                <li>性能</li>
                <li>日志</li> -->
                <li id="SSH">SSH</li>
                <li id="Telnet">Telnet</li>
                <li>保存拓扑</li>
            </ul>
        </div>
        <div class="contextMenu" id="topoDataLinkMenuClean" ng-show="false"></div>
        <div class="contextMenu" id="termRightMenu" ng-show="false">
            <ul>
                <li id="termPaste">粘贴</li>
            </ul>
        </div>
    </div>
    <!--PW TOPOLOGY VIEW-->
    <div ng-hide="pwhide">
        <div class="row-fluid topologyview">
            <topology-pw class="col-md-12" pw-data="pwData"></topology-pw>
        </div>
        <div class="row">
            <!-- <button class="btn btn-warn col-md-1" ng-click="change(1)" >点我试试</button>
            <div ng-show="checkbusshow">
                <div class="col-md-2"><input type="checkbox" ng-model="busalarmshow" /><label>业务告警</label></div>
                <div class="col-md-1"><input type="checkbox" ng-model="bandwidthshow" /><label>带宽</label></div>
                <div class="col-md-1"><input type="checkbox" ng-model="delayshow" /><label>时延</label></div>
                <div class="col-md-1"><input type="checkbox" ng-model="shakeshow" /><label>抖动</label></div>
                <div class="col-md-2"><input type="checkbox" ng-model="packetlossshow" /><label>丢包率</label></div>
                <div class="col-md-1"><input type="checkbox" ng-model="availshow" /><label>可用性</label></div>
            </div>
            <div class="col-md-3"></div> -->
            <ul style="list-style:none;background-color:#ccc;">
                <!-- <li style="float:left;width:100px;"><button class="btn btn-warn col-md-1" ng-click="change(0)">点我试试</button></li> -->
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="busalarmshow" />
                    <label>{{ 'Business Alarm' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="bandwidthshow" />
                    <label>{{'bandwidth' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="delayshow" />
                    <label>{{ 'delay' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="shakeshow" />
                    <label>{{ 'shake' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="packetlossshow" />
                    <label>{{ 'Packet Loss Rate' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="availshow" />
                    <label>{{ 'Availability Rate' | translate }}</label>
                </li>
            </ul>
        </div>
        <div class="row-fluid">
            <div class="col-md-4" ng-show="busalarmshow">
                <piecharts id="busalarm" name="{{ 'Business Alarm' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="bandwidthshow">
                <piecharts id="bandwidth" name="{{ 'bandwidth' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="delayshow">
                <piecharts id="delay" name="{{ 'delay' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="shakeshow">
                <piecharts id="shake" name="{{ 'shake' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="packetlossshow">
                <piecharts id="packetloss" name="{{ 'Packet Loss Rate' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="availshow">
                <piecharts id="availibity" name="{{ 'Availability Rate' | translate }}"></piecharts>
            </div>
        </div>
    </div>
    <!--TUNNEL TOPOLOGY VIEW-->
    <div class="row-fluid " ng-hide="tunnelhide">
        <div class="col-md-12 topologyview">
            <topology-tunnel class="col-md-12" tunnel-data="tunnelData" topology-data="topologyData" physicalhide="physicalhide" tunnelhide="tunnelhide"></topology-tunnel>
        </div>
    </div>
    <!--sservice eline pw lsp-->
    <div ng-hide="service.pwhide">
        <!-- topology.tpl.html:service.pwhide -->
        <div class="row" align="right" style="margin-top: 10px;margin-right: 20px;">
            <input class="input-medium search-query" type="text" placeholder="{{ 'Eline Source Node' | translate }}" ng-model="service.sourceNode" /> &nbsp;&nbsp;&nbsp;&nbsp;
            <input class="input-medium search-query" type="text" placeholder="{{ 'Eline Destination Node' | translate }}" ng-model="service.destNode" /> &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="image" value="{{ 'filter' | translate }}" ng-click=service.filter() src="assets/images/filterbutton.png" style="margin-bottom: -4px;">
        </div>
        <div class="row">
            <topology-service pw-data="service.topologyData" type="service.type"></topology-service>
        </div>
        <div class="row" style="margin-top: 25px;">
            <ul style="list-style:none;background-color:#ccc;">
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="busalarmshow" />
                    <label>{{ 'Business Alarm' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="bandwidthshow" />
                    <label>{{ 'bandwidth' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="delayshow" />
                    <label>{{ 'delay' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="shakeshow" />
                    <label>{{ 'shake' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="packetlossshow" />
                    <label>{{ 'Packet Loss Rate' | translate }}</label>
                </li>
                <li style="float:left;width:100px;">
                    <input type="checkbox" ng-model="availshow" />
                    <label>{{ 'Availability Rate' | translate }}</label>
                </li>
            </ul>
        </div>
        <div class="row-fluid">
            <div class="col-md-4" ng-show="busalarmshow">
                <piecharts id="busalarm" name="{{ 'Business Alarm' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="bandwidthshow">
                <piecharts id="bandwidth" name="{{ 'bandwidth' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="delayshow">
                <piecharts id="delay" name="{{ 'delay' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="shakeshow">
                <piecharts id="shake" name="{{ 'shake' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="packetlossshow">
                <piecharts id="packetloss" name="{{ 'Packet Loss Rate' | translate }}"></piecharts>
            </div>
            <div class="col-md-4" ng-show="availshow">
                <piecharts id="availibity" name="{{ 'Availability Rate' | translate }}"></piecharts>
            </div>
        </div>
    </div>
    <!--MANAGER TOPOLOGY MAIN PAGE-->
    <div id="managertopology" ng-hide="manager.managerhide">
        <div class="row-fluid" style="margin-top:5px; margin-left:25px; ">
            <!-- topology.tpl.html:manager.managerhide -->
            <div class="row" align="right" style="margin-top: 10px;margin-right: 20px;">
                <span style="color: black; font-weight: 700;" class="pull-left">{{"RefreshTime" | translate}}:</span>
                <span style="color: black" class="pull-left">{{manager.refreshTime}}</span>
                <select ng-model="manager.managerselect" class="form-control selectDiv2" style="height:26px;width:120px;margin-right:20px;padding-top: 1px;margin-top: -2px;">
                    <option value="name">{{ 'node id' | translate }}</option>
                    <option value="userlabel">{{ 'user label' | translate }}</option>
                </select>
                <input class="input-medium search-query margin-left-sdn" type="text" placeholder="" ng-model="manager.searchvalue" style="height: 26px;margin-right:20px;" />
                <input type="image" title="{{'filter' | translate}}" ng-click="manager.searchManager()" src="assets/images/filterbutton.png" class="margin-left-sdn" style="margin-bottom: -5px;">
            </div>
        </div>
        <div class="row-fluid topologyview">
            <topology-manager class="col-md-12" topology-data="manager.topologyData"></topology-manager>
        </div>
    </div>
    <!--flow topology-->
    <div ng-hide="flow.flowhide">
        <div class="row-fluid">
            <!-- topology.tpl.html:flow.flowhide -->
            <div class="row" align="right" style="margin-top:8px; margin-left:25px;margin-right:20px ">
                <span style="color: black;margin-top: 5px;font-weight: 700;" class="pull-left">{{"RefreshTime" | translate}}:</span>
                <span style="color: black;margin-top: 5px;" class="pull-left">{{flow.refreshTime}}</span>
                <ul class="flowul pull-left" style="margin-top: 5px;">
                    <li class="flowulfirst">{{"superload" | translate}}</li>
                    <li class="flowulsecond">{{"overload" | translate}}</li>
                    <li class="flowulthree">{{"underload" | translate}}</li>
                </ul>
                <select ng-model="flow.select" class="form-control selectDiv2" style="height:26px;width:120px;margin-right:20px;padding-top: 1px;margin-top: -2px;">
                    <option value="name">{{ 'node id' | translate }}</option>
                    <option value="userlabel">{{ 'user label' | translate }}</option>
                </select>
                <input class="input-medium search-query margin-left-sdn" type="text" placeholder="" ng-model="flow.searchvalue" style="height: 26px;margin-right:20px;" />
                <input type="image" title="{{'filter' | translate}}" ng-click="flow.searchManager()" src="assets/images/filterbutton.png" class="margin-left-sdn" style="margin-bottom: -5px;">
            </div>
        </div>
        <!--<div>
            <button ng-click="terminal.open(1)">open terminal</button>
            <button ng-click="terminal.open(2)">open terminal</button>
        </div>
        <topology-terminal conf="termTopo1"></topology-terminal>
        <topology-terminal conf="termTopo2"></topology-terminal>-->
        <div>
            <topology-flow class="col-md-12" flow-data="flow.topologyData"></topology-flow>
        </div>
        <!-- <div id="mintool" style="position: fixed; height: 38px; bottom: 0px; width:100%;background-color: #ccc;z-index:3"></div>-->
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="topoDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content" style="background-color:#EBECF1">
                <div class="modal-header">
                    <div class="modal-title" style="background-color:#000">
                        <img id="detailimg" src="assets/images/linkmodaltitle.gif"></img>
                    </div>
                </div>
                <div class="modal-body" id="topoDetailBody">
                </div>
                <div class="modal-footer">
                    <button id="topoNodeBtn" type="button" class="btn btn-default" ng-click="updateNodeUserLabelById()">{{'Submit' | translate }}
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{'Close' | translate }}
                    </button>
                    <!--
                    <input type="image" data-dismiss="modal" src="assets/images/close.gif" width="100" height="26">
                    </input>
                    -->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>

    <div class="modal fade" id="topoConnModal" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" style="width: 40%">
            <div class="modal-content" style="background-color:#EBECF1">
                <form id="topoConnForm" name="topoConnForm">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="simpleTopoTitle">&nbsp;&nbsp;&nbsp;{{'Topo Login' |
                            translate}}</h4>
                    </div>
                    <div class="modal-body">
                        <table cellpadding="8" align="center">
                            <tbody class="table ng-pristine ng-untouched ng-valid">
                            <tr>
                                <td>{{ 'Protocal' | translate }}&nbsp;:&nbsp;</td>
                                <td>
                                    <input type="text" ng-model="topoConnUser.protocal"
                                           id="topoconn-protocal" readonly="readonly" required/>
                                </td>
                            </tr>
                            <tr>
                                <td>IP&nbsp;:&nbsp;</td>
                                <td>
                                    <input type="text" ng-model="topoConnUser.ip"
                                           id="topoconn-ip" tooltip="{{ 'string'| translate}}" required/>
                                </td>
                            </tr>
                            <tr>
                                <td>{{ 'Port' | translate }}&nbsp;:&nbsp;</td>
                                <td>
                                    <input type="text" ng-model="topoConnUser.port"
                                           id="topoconn-port" tooltip="{{ 'string'| translate}}" required/>
                                </td>
                            </tr>
                            <tr>
                                <td>{{ 'User Name' | translate }}&nbsp;:&nbsp;</td>
                                <td>
                                    <input type="text" ng-model="topoConnUser.name"
                                           id="topoconn-username" tooltip="{{ 'string'| translate}}" required/>
                                </td>
                            </tr>

                            <tr>
                                <td>{{ 'Password' | translate }}&nbsp;:&nbsp;</td>
                                <td>
                                    <input type="password" ng-model="topoConnUser.pwd"
                                           id="topoconn-pwd" tooltip="{{ 'string'| translate}}" required/>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <div align="center" style="margin-bottom:25px">
                        <button type="button" class="btn btn-default" ng-disabled="topoConnUser.$invalid"
                                ng-click="topoConnect()">{{'Connect' | translate }}
                        </button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal" aria-hidden="true">{{'Cancel' | translate }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 创建外部节点 模态框（Modal） -->
    <div class="modal fade" id="createExtNodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" style="width: 55%">
            <div class="modal-content" style="background-color:#EBECF1">
                <form name="extnode">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;{{'Create ExtNode' |
                            translate}}</h4>
                    </div>
                    <div class="modal-body">
                        <table cellpadding="8">
                            <tbody class="table ng-pristine ng-untouched ng-valid">
                                <tr>
                                    <td>ID&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" ng-model="extNode.id" name="extnode-id" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                    <td>{{ 'Name' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" ng-model="extNode['name']" name="extnode-name" tooltip="{{ 'string'| translate}}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'User Label' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" ng-model="extNode['user-label']" name="extnode-userlabel" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                    <td>{{ 'Node Type' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select ng-model="extNode['node-type']" ng-init="extNode['node-type']='physical'">
                                            <option value="physical">{{'physical' | translate}}</option>
                                            <option value="container">{{'container' | translate}}</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'Admin Status' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select ng-model="extNode['admin-status']" ng-init="extNode['admin-status']='admin-up'">
                                            <option value="admin-up">admin-up</option>
                                            <option value="admin-down">admin-down</option>
                                        </select>
                                    </td>
                                    <td>{{ 'Operate Status' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select ng-model="extNode['operate-status']" ng-init="extNode['operate-status']='operate-up'">
                                            <option value="operate-up">{{ 'operate-up' | translate }}</option>
                                            <option value="operate-down">{{ 'operate-down' | translate }}</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'Resource ID' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" ng-model="extNode['resource-id']" name="extnode-resourceid" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                    <td>{{ 'Parent Topo ID' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" ng-model="extNode['parent-topo-id']" name="extnode-parenttopoid" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>IP&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" ng-model="extNode['ip']" name="extnode-ip" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ng-disabled="extnode.$invalid" ng-click="createExtNode(extNode)">{{'Submit' | translate }}
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{'Close' | translate }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 创建外部链路 模态框（Modal） -->
    <div class="modal fade" id="createExtLinkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" style="width: 55%">
            <div class="modal-content" style="background-color:#EBECF1">
                <form name="extlink">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;{{'Create ExtLink' | translate}}</h4>
                    </div>
                    <div class="modal-body">
                        <table cellpadding="8">
                            <tbody class="table ng-pristine ng-untouched ng-valid">
                                <tr>
                                    <td>ID&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" style="width:185px;" ng-model="extLink.id" name="extlink-id" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                    <td>{{ 'Parent Topo ID' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" style="width:185px;" ng-model="extLink['parent-topo-id']" name="extlink-parenttopoid" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'Name' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text"  style="width:185px;" ng-model="extLink['name']" name="extlink-name" tooltip="{{ 'string'| translate}}" />
                                    </td>
                                    <td>{{ 'User Label' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" style="width:185px;" ng-model="extLink['user-label']" name="extlink-userlabel" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'Left Node ID' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select id="leftNodeId" ng-model="extLink['left-node-id']">
                                            <option ng-repeat="item in allNodesAndExtNodes" value="{{item.id}}">{{item['user-label']}}</option>
                                        </select>
                                    </td>
                                    <td>{{ 'Right Node ID' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select id="rightNodeId" ng-model="extLink['right-node-id']">
                                            <option ng-repeat="item in allNodesAndExtNodes" value="{{item.id}}">{{item['user-label']}}</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'Left Ltp ID' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" style="width:185px;" ng-model="extLink['left-ltp-id']" name="extlink-leftltpid" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                    <td>{{ 'Right Ltp ID' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" style="width:185px;" ng-model="extLink['right-ltp-id']" name="extnode-rightltpid" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'Left Ltp Mac' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" style="width:185px;" ng-model="extLink['left-ltp-mac']" name="extlink-leftltpmac" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                    <td>{{ 'Right Ltp Mac' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <input type="text" style="width:185px;" ng-model="extLink['right-ltp-mac']" name="extnode-rightltpmac" tooltip="{{ 'string'| translate}}" required/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'Layer Rate' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select ng-model="extLink['layer-rate']" ng-init="extLink['layer-rate']='physical'">
                                            <option value="physical">{{'physical' | translate}}</option>
                                            <option value="optical">{{'optical' | translate}}</option>
                                            <option value="datalink">{{'datalink' | translate}}</option>
                                            <option value="ip">ip</option>
                                        </select>
                                    </td>
                                    <td>{{ 'Direction' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select ng-model="extLink.direction" ng-init="extLink.direction='bidirectional'">
                                            <option value="bidirectional">{{'bidirectional' | translate}}</option>
                                            <option value="unidirectional">{{'unidirectional' | translate}}</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ 'Admin Status' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select ng-model="extLink['admin-status']" ng-init="extLink['admin-status']='admin-up'">
                                            <option value="admin-up">admin-up</option>
                                            <option value="admin-down">admin-down</option>
                                        </select>
                                    </td>
                                    <td>{{ 'Operate Status' | translate }}&nbsp;:&nbsp;</td>
                                    <td>
                                        <select ng-model="extLink['operate-status']" ng-init="extLink['operate-status']='operate-up'">
                                            <option value="operate-up">{{ 'operate-up' | translate }}</option>
                                            <option value="operate-down">{{ 'operate-down' | translate }}</option>
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ng-disabled="extlink.$invalid" ng-click="createExtLink(extLink)">{{'Submit' | translate }}
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{'Close' | translate }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 流量拓扑查询 模态框（Modal） -->
    <div class="modal fade" id="flowTopoSearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" style="width: 55%">
            <div class="modal-content" style="background-color:#EBECF1">
                <form name="flowLink">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;{{'serachFlow' | translate}}</h4>
                    </div>
                    <div class="modal-body">
                        <div>
                            <table>
                                <tr>
                                    <td width="10%">{{"loadType" | translate}}:</td>
                                    <td width="20%">
                                        <select style="height: 26px;padding-top: 1px;padding-bottom: 1px;border-bottom-width: 1px;border-top-width: 1px;" ng-model="flow.loadType">
                                            <option value="none"></option>
                                            <option value="superload">{{"superload" | translate}}</option>
                                            <option value="overload">{{"overload" | translate}}</option>
                                            <option value="underload">{{"underload" | translate}}</option>
                                        </select>
                                    </td>
                                    <td width="10%"></td>
                                    <td width="10%">{{"flow-linkname" | translate}}:</td>
                                    <td width="60%">
                                        <input ng-model="flow.searchValue">
                                    </td>
                                    <!--<td><button type="button" src="assets/images/filterbutton.png" ng-click="flow.searchBtnClick()">查询</button></td>-->
                                </tr>
                            </table>
                        </div>
                        <div class="tablebox" style="margin-top:25px;overflow: hidden;">
                            <table class="footable table" style="table-layout:fixed;margin:0 0;">
                                <thead>
                                    <tr>
                                        <th width="20%">{{"flow-linkstatus" | translate}}</th>
                                        <th width="60%">{{"flow-linkname" | translate}}</th>
                                        <th width="20%">{{"flow-bandwidthrate" | translate}}</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="tablebox" style="height:300px;">
                            <table class="footable table" style="table-layout:fixed;margin:0 0;">
                                <tbody class="flowtable">
                                    <tr ng-repeat="link in flow.flowLinks | filterRateType: flow.loadType | filter: {linkname: flow.searchValue}">
                                        <td width="20%">
                                            <div ng-style="flow.linkSataus(link.color)"></div>
                                        </td>
                                        <td title="{{link.linkname}}" width="60%">{{link.linkname}}</td>
                                        <td width="20%">{{parseFloat(link.rate) * 100 + '%'}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ng-disabled="flowLink.$invalid" ng-click="flow.searchBtnClick()">{{'Search' | translate }}
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{'Close' | translate }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- bmap -->
    <div ng-hide="bmap.hide" style="width:100%;height:1000px;border:1px solid gray;position:absolute;" id="bmapContainer"></div>

</div>

<script type="text/javascript">
    var map=document.getElementById("baidumap");
    map.onclick=function(){
         window.open('src/app/topology/maptopo.tpl.html','top');
    }
</script>